<!--
 * @Author: zheguo 3188606474@qq.com
 * @Date: 2024-04-24 19:59:56
 * @LastEditors: zheguo 3188606474@qq.com
 * @LastEditTime: 2024-04-24 22:00:57
 * @FilePath: \projectOne\myapp\src\components\admin\change_admin.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="admin_content">
        <div class="admin_form">
            <el-form :model="form" label-width="auto" style="max-width: 600px">
                <div class="form">
                    <el-form-item label="管理员名称">
                        <el-input v-model="form.adminname" />
                    </el-form-item>
                    <el-form-item label="管理员密码">
                        <el-input v-model="form.password" />
                    </el-form-item>
                    <el-form-item label="验证码">
                        <el-input v-model="form.identify" />
                    </el-form-item>
                    <el-form-item>
                        <el-button class="form_button" type="primary" @click="onSubmit">创建</el-button>
                    </el-form-item>
                </div>

                <div class="textarea">
                    <el-form-item label="添加备注">
                        <el-input v-model="form.desc" :rows="10" type="textarea" />
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import axios from 'axios';
import { reactive, onBeforeMount, ref } from 'vue'

// do not use same name with ref
const form = reactive({
    adminname: "",
    password: "",
    identify: "",
    desc: ""
})

const onSubmit = async () => {

    if (!form.adminname) {
        alert("管理员名称不能为空")
        return
    } else if (!form.password) {
        alert("管理员密码不能为空")
        return
    } else if (!form.identify) {
        alert("验证码不能为空")
        return
    } else if (!form.desc) {
        alert("备注不能为空")
        return
    } else {
        await axios({
            method: "POST",
            url: "http://localhost:3030/adminLogin/add",
            data: {
                adminname: form.adminname,
                password: form.password,
                identify: form.identify,
                desc: form.desc
            }
        }).then(res => {
            if (res.data.ok == 1) {
                alert("创建成功")
                form.adminname = null,
                    form.password = null,
                    form.identify = null,
                    form.desc = null
            } else {
                alert("创建失败")
                form.adminname = null,
                    form.password = null,
                    form.identify = null,
                    form.desc = null
            }
        })
    }

}



</script>

<style lang="scss" scoped>
.admin_content {
    width: 100%;

    .admin_form {
        width: 1000px;
        margin: 50px auto;
        box-sizing: border-box;

        .el-form {
            display: flex;
            justify-content: space-between;

            .form {
                width: 400px;

                .el-form-item {
                    width: 400px;
                    height: 50px;

                    .form_button {
                        width: 100%;
                    }
                }
            }


            .textarea {
                margin-left: 70px;
                width: 500px;
                height: 300px;

                .el-form-item {
                    width: 500px;
                }

            }
        }

    }

    .admin_table {
        height: auto;
    }

}
</style>